<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二十四节气莲花生长图鉴</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: '楷体', 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, #f0f4c3 0%, #e8f5e9 100%);
            min-height: 100vh;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            text-align: center;
            padding: 2rem 0;
            position: relative;
        }

        .title {
            font-size: 2.8rem;
            color: var(--春色);
            text-shadow: 2px 2px 4px rgba(11, 98, 5, 0.1);
            animation: titleFloat 3s ease-in-out infinite;
            margin-bottom: 1rem;
        }

        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 25px;
            padding: 20px;
        }

        .lotus-card {
            position: relative;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            cursor: pointer;
            background: white;
            break-inside: avoid;
        }

        .lotus-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
        }

        .lotus-img {
            width: 100%;
            height: 320px;
            object-fit: cover;
            transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .lotus-card:hover .lotus-img {
            transform: scale(1.08);
        }

        .season-label {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
            color: white;
            padding: 1.2rem;
            text-align: center;
            font-size: 1.2rem;
            letter-spacing: 1px;
        }

        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.9);
            z-index: 1000;
            overflow-y: auto;
        }

        .modal-content {
            position: relative;
            background: #fffef7;
            max-width: 800px;
            margin: 2rem auto;
            padding: 2.5rem;
            border-radius: 15px;
            animation: modalShow 0.4s ease;
            box-shadow: 0 0 30px rgba(0,0,0,0.3);
        }

        .close-btn {
            position: absolute;
            right: 1.5rem;
            top: 1rem;
            font-size: 2rem;
            cursor: pointer;
            color: #666;
            transition: color 0.3s;
        }

        .close-btn:hover {
            color: #333;
        }

        #modalDesc {
            white-space: pre-line;
            line-height: 1.8;
            margin-top: 1.5rem;
            color: #555;
        }

        @keyframes titleFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-8px); }
        }

        @keyframes modalShow {
            from { transform: scale(0.9); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }

        @media (max-width: 768px) {
            .grid-container {
                grid-template-columns: repeat(2, 1fr);
                gap: 15px;
            }
            .lotus-img {
                height: 250px;
            }
            .title {
                font-size: 2rem;
            }
        }
          /* 文字标签 */
        .label {
            position: absolute;
            bottom: -25px;
            left: 50%;
            transform: translateX(-50%);
            color: #4a9375;
            font-family: '楷体';
            font-size: 14px;
            white-space: nowrap;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        /* 返回框 */
        :root {
            --花瓣色: #ff99b2;
            --花心色: #ffd700;
            --花心辉光: #ffea80;
        }
        .lotus-btn {
            position: fixed;
            top: 25px;
            left: 60px;
            z-index: 1000;
            width: 70px;
            height: 70px;
            cursor: pointer;
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .petals {
            position: absolute;
            width: 100%;
            height: 100%;
            animation: rotatePetals 25s linear infinite;
        }

        /* 尖顶椭圆花瓣 */
        .petal {
            position: absolute;
            width: 30px;
            height: 60px;
            background: linear-gradient(145deg, 
                rgba(255,255,255,0.9) 30%,
                var(--花瓣色) 100%);
            clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 60% 100%, 40% 100%, 0 35%, 20% 10%);
            transform-origin: bottom center;
            filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.1));
        }

        /* 12片花瓣布局 */
        .petal:nth-child(1) { transform: rotate(0deg) translateY(-10px) scale(0.95); }
        .petal:nth-child(2) { transform: rotate(30deg) translateY(-10px) scale(0.95); }
        .petal:nth-child(3) { transform: rotate(60deg) translateY(-10px) scale(0.95); }
        .petal:nth-child(4) { transform: rotate(90deg) translateY(-10px) scale(0.95); }
        .petal:nth-child(5) { transform: rotate(120deg) translateY(-10px) scale(0.95); }
        .petal:nth-child(6) { transform: rotate(150deg) translateY(-10px) scale(0.95); }
        .petal:nth-child(7) { transform: rotate(180deg) translateY(-10px) scale(0.95); }
        .petal:nth-child(8) { transform: rotate(210deg) translateY(-10px) scale(0.95); }
        .petal:nth-child(9) { transform: rotate(240deg) translateY(-10px) scale(0.95); }
        .petal:nth-child(10) { transform: rotate(270deg) translateY(-10px) scale(0.95); }
        .petal:nth-child(11) { transform: rotate(300deg) translateY(-10px) scale(0.95); }
        .petal:nth-child(12) { transform: rotate(330deg) translateY(-10px) scale(0.95); }
        /* 层次化花瓣效果 */
        .petal:nth-child(odd) {
            height: 65px;
            filter: brightness(1.1) drop-shadow(1px 1px 2px rgba(0,0,0,0.1));
            z-index: 1;
        }

        .petal:nth-child(even) {
            height: 55px;
            filter: brightness(0.9);
            z-index: 0;
        }

        .stamen {
            animation: stamenPulse 2s ease-in-out infinite;
        }

        /* 新增花瓣展开动画 */
        @keyframes petalBloom {
            0% { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%); }
            100% { clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 60% 100%, 40% 100%, 0 35%, 20% 10%); }
        }

        .petal {
            animation: petalBloom 1s ease-out forwards;
        }

        /* 优化悬停效果 */
        .lotus-btn:hover {
            /* transform: scale(1.15) rotate(5deg); */
            transform: scale(1.1) rotate(15deg);
            animation: lotusBloom 1s ease forwards;
        }

        .lotus-btn:hover .petal {
            animation: petalFloat 2s ease-in-out infinite;
        }
        @keyframes petalFloat {
            0%, 100% { transform: rotate(var(--deg)) translateY(-10px) scale(0.95); }
            50% { transform: rotate(var(--deg)) translateY(-15px) scale(1); }
        }
        #sakuraCanvas {
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none;
        z-index: 1;
    }
    </style>
</head>
<body>
        <a href="./main.html" class="lotus-btn">
            <div class="petals">
                <!-- 12片花瓣 -->
                <div class="petal" style="--deg: 0deg"></div>
                <div class="petal" style="--deg: 30deg"></div>
                <div class="petal" style="--deg: 60deg"></div>
                <div class="petal" style="--deg: 90deg"></div>
                <div class="petal" style="--deg: 120deg"></div>
                <div class="petal" style="--deg: 150deg"></div>
                <div class="petal" style="--deg: 180deg"></div>
                <div class="petal" style="--deg: 210deg"></div>
                <div class="petal" style="--deg: 240deg"></div>
                <div class="petal" style="--deg: 270deg"></div>
                <div class="petal" style="--deg: 300deg"></div>
                <div class="petal" style="--deg: 330deg"></div>
            </div>
            <div class="stamen"></div>
            <div class="label">返回</div>
        </a>
    <div class="container">
        <header class="header">
            <h1 class="title">二十四节气·莲物语</h1>
            <p style="color: #666; font-size: 1.1rem;">观四时之变，赏莲花之美</p>
        </header>
        <!-- 由js生成 -->
        <div class="grid-container" id="gallery">  </div>
    </div>

    <div class="modal" id="detailModal">
        <div class="modal-content">
            <span class="close-btn" onclick="closeModal()">x</span>
            <h2 id="modalTitle" style="color: var(--春色); border-bottom: 2px solid #eee; padding-bottom: 0.5rem;"></h2>
            <img id="modalImg" style="width:100%; border-radius: 10px; margin-top: 1.5rem;">
            <p id="modalDesc" style="font-size: 1.1rem;"></p>
        </div>
    </div>
    <canvas id="sakuraCanvas"></canvas>
    <script>
        // 完整的24节气数据
        const seasonData = [
            // 春季
            { 
                title: "立春·萌芽", 
                img: "images/立春.png",
                desc: `《月令七十二候集解》载：“立，建始也，春气始而建立也”
                
                三候特征：
                一候东风解冻 | 二候蛰虫始振 | 三候鱼陟负冰
                
                莲事记录：
                🌱 塘泥渐软 | 🌱 藕节萌动 | 🌱 蓄势待发`
            },
            {
                title: "雨水·润泽",
                img: "images/雨水.png",
                desc: `杜甫有诗云：“好雨知时节，当春乃发生”
                三候特征：
                一候獭祭鱼 | 二候鸿雁来 | 三候草木萌动
                莲事：春水初涨，嫩芽破泥，荷钱点点`
            },
            {
                title: "惊蛰·初动",
                img: "images/惊蛰.png",
                desc: `陶渊明诗：“促春遘时雨，始雷发东隅”
                三候特征：
                一候桃始华 | 二候仓庚鸣 | 三候鹰化为鸠
                莲事：雷震虫醒，藕鞭伸展，新叶浮水`
            },
            {
                title: "春分·平衡",
                img: "images/春分.png",
                desc: `欧阳修云：“南园春半踏青时，风和闻马嘶”
                三候特征：
                一候玄鸟至 | 二候雷乃发声 | 三候始电
                莲事：昼夜均分，立叶初展，茎立中流`
            },
            {
                title: "清明·舒展",
                img: "images/清明.png",
                desc: `杜牧诗：“清明时节雨纷纷，路上行人欲断魂”
                三候特征：
                一候桐始华 | 二候田鼠化鴽 | 三候虹始见
                莲事：浮叶舒展，碧盘初成，小荷露角`
            },
            {
                title: "谷雨·润养",
                img: "images/谷雨.png",
                desc: `朱槔诗：“天点纷林际，虚檐写梦中”
                三候特征：
                一候萍始生 | 二候鸣鸠拂其羽 | 三候戴胜降于桑
                莲事：新藕成形，叶脉清晰，蓄力生长`
            },

            // 夏季
            {
                title: "立夏·初长",
                img: "images/立夏.png",
                desc: `陆游诗：“槐柳阴初密，帘栊暑尚微”
                三候特征：
                一候蝼蝈鸣 | 二候蚯蚓出 | 三候王瓜生
                莲事：立叶挺水，翠盖初张，蜻蜓立角`
            },
            {
                title: "小满·渐丰",
                img: "images/小满.png",
                desc: `欧阳修《五绝·小满》：“夜莺啼绿柳，皓月醒长空”
                三候特征：
                一候苦菜秀 | 二候靡草死 | 三候麦秋至
                莲事：叶满池塘，花苞初现，暗香浮动`
            },
            {
                title: "芒种·育秀",
                img: "images/芒种.png",
                desc: `《红楼梦》载：“尚古风俗：凡交芒种节的这日，都要设摆各色礼物，祭饯花神”
                三候特征：
                一候螳螂生 | 二候鵙始鸣 | 三候反舌无声
                莲事：花梗抽长，蓓蕾含羞，孕育芳华`
            },
            {
                title: "夏至·极阳",
                img: "images/夏至.png",
                desc: `刘禹锡诗：“东边日出西边雨，道是无晴却有晴”
                三候特征：
                一候鹿角解 | 二候蝉始鸣 | 三候半夏生
                莲事：亭亭玉立，初绽娇颜，映日别红`
            },
            {
                title: "小暑·蕴香",
                img: "images/小暑.png",
                desc: `元稹诗：“倏忽温风至，因循小暑来”
                三候特征：
                一候温风至 | 二候蟋蟀居宇 | 三候鹰始鸷
                莲事：花瓣舒展，幽香浮动，蜂绕蝶舞`
            },
            {
                title: "大暑·盛放",
                img: "images/大暑.png",
                desc: `方回诗：“平分天四序，最苦是炎蒸”
                三候特征：
                一候腐草为萤 | 二候土润溽暑 | 三候大雨时行
                莲事：繁花似锦，莲蓬初现，满塘生辉`
            },

            // 秋季
            {
                title: "立秋·转序",
                img: "images/立秋.png",
                desc: `刘翰诗：“乳鸦啼散玉屏空，一枕新凉一扇风”
                三候特征：
                一候凉风至 | 二候白露降 | 三候寒蝉鸣
                莲事：花色转深，莲房饱满，籽粒渐成`
            },
            {
                title: "处暑·敛华",
                img: "images/处暑.png",
                desc: `王之道诗：“处暑余三日，高原满一犁”
                三候特征：
                一候鹰乃祭鸟 | 二候天地始肃 | 三候禾乃登
                莲事：花瓣渐落，莲实低垂，芳华内敛`
            },
            {
                title: "白露·凝珠",
                img: "images/白露.png",
                desc: `《诗经》云：“蒹葭苍苍，白露为霜”
                三候特征：
                一候鸿雁来 | 二候玄鸟归 | 三候群鸟养羞
                莲事：晨露凝珠，叶缘始黄，莲子饱满`
            },
            {
                title: "秋分·平津",
                img: "images/秋分.png",
                desc: `谢逸诗：“金气秋分，风清露冷秋期半”
                三候特征：
                一候雷始收声 | 二候蛰虫坯户 | 三候水始涸
                莲事：叶卷西风，莲实垂首，藕节肥硕`
            },
            {
                title: "寒露·霜华",
                img: "images/寒露.png",
                desc: `王安石诗：“空庭得秋长漫漫，寒露入暮愁衣单”
                三候特征：
                一候鸿雁来宾 | 二候雀入大水为蛤 | 三候菊有黄华
                莲事：残荷听雨，藕白如玉，秋韵绵长`
            },
            {
                title: "霜降·收成",
                img: "images/霜降.png",
                desc: `白居易诗：“霜降水返壑，风落木归山”
                三候特征：
                一候豺乃祭兽 | 二候草木黄落 | 三候蛰虫咸俯
                莲事：叶枯藕熟，莲子归仓，轮回终始`
            },

            // 冬季
            {
                title: "立冬·归藏",
                img: "images/立冬.png",
                desc: `李白诗：“冻笔新诗懒写，寒炉美酒时温”
                三候特征：
                一候水始冰 | 二候地始冻 | 三候雉入大水为蜃
                莲事：枯茎傲立，藕藏深泥，静待春归`
            },
            {
                title: "小雪·静守",
                img: "images/小雪.png",
                desc: `徐铉诗：“寂寥小雪闲中过，斑驳轻霜鬓上加”
                三候特征：
                一候虹藏不见 | 二候天气上升地气下降 | 三候闭塞而成冬
                莲事：塘面初冰，生机内敛，蓄势待发`
            },
            {
                title: "大雪·深蕴",
                img: "images/大雪.png",
                desc: `柳宗元诗：“千山鸟飞绝，万径人踪灭”
                三候特征：
                一候鹖鴠不鸣 | 二候虎始交 | 三候荔挺出
                莲事：冰雪覆塘，藕节深眠，养精蓄锐`
            },
            {
                title: "冬至·复始",
                img: "images/冬至.png",
                desc: `杜甫诗：“天时人事日相催，冬至阳生春又来”
                三候特征：
                一候蚯蚓结 | 二候麋角解 | 三候水泉动
                莲事：阴极阳生，藕芽萌动，周而复始`
            },
            {
                title: "小寒·待春",
                img: "images/小寒.png",
                desc: `元稹诗：“小寒连大吕，欢鹊垒新巢”
                三候特征：
                一候雁北乡 | 二候鹊始巢 | 三候雉始鸲
                莲事：寒塘如镜，藕蓄生机，静候春雷`
            },
            { 
                title: "大寒·轮回", 
                img: "images/大寒.png",
                desc: `邵雍诗：“冬至子之半，天心无改移”
                
                三候特征：
                一候鸡始乳 | 二候征鸟厉疾 | 三候水泽腹坚
                
                莲事记录：
                ❄️ 冰封塘寂 | ❄️ 生命蛰伏 | ❄️ 轮回将启`
            }
        ];

        // 初始化画廊
        function initGallery() {
            const gallery = document.getElementById('gallery');
            seasonData.forEach(item => {
                const card = document.createElement('div');
                card.className = 'lotus-card';
                card.innerHTML = `
                    <img src="${item.img}" alt="${item.title}" class="lotus-img">
                    <div class="season-label">${item.title}</div>
                `;
                card.addEventListener('click', () => showModal(item));
                gallery.appendChild(card);
            });
        }

        // 显示详情模态框
        function showModal(data) {
            const modal = document.getElementById('detailModal');
            document.getElementById('modalTitle').textContent = data.title;
            document.getElementById('modalImg').src = data.img;
            document.getElementById('modalDesc').textContent = data.desc;
            modal.style.display = 'block';
        }

        // 关闭模态框
        function closeModal() {
            document.getElementById('detailModal').style.display = 'none';
        }

        // 点击模态框外部关闭
        window.onclick = function(event) {
            const modal = document.getElementById('detailModal');
            if (event.target == modal) {
                closeModal();
            }
        }

        // 初始化
        window.onload = initGallery;
        // 樱花飘落特效
    class Sakura {
        constructor(canvas) {
            this.canvas = canvas;
            this.ctx = canvas.getContext('2d');
            this.petals = [];
            this.resize();
            this.init();
            window.addEventListener('resize', () => this.resize());
        }

        resize() {
            this.width = window.innerWidth;
            this.height = window.innerHeight;
            this.canvas.width = this.width;
            this.canvas.height = this.height;
        }

        init() {
            // 创建花瓣池
            for (let i = 0; i < 35; i++) {
                this.petals.push({
                    x: Math.random() * this.width,
                    y: Math.random() * -this.height,
                    radius: Math.random() * 3 + 2,
                    speed: Math.random() * 0.5 + 0.2,
                    angle: Math.random() * 360,
                    swing: Math.random() * 2 + 1
                });
            }

            this.animate();
        }

        drawPetal(petal) {
            this.ctx.save();
            this.ctx.translate(petal.x, petal.y);
            this.ctx.rotate(petal.angle * Math.PI / 180);
            
            // 绘制樱花花瓣形状
            this.ctx.beginPath();
            this.ctx.fillStyle = `rgba(255,183,197,${Math.random() * 0.4 + 0.6})`;
            this.ctx.ellipse(0, 0, petal.radius * 1.2, petal.radius, 0, 0, Math.PI * 2);
            this.ctx.fill();
            this.ctx.restore();
        }

        update() {
            this.ctx.clearRect(0, 0, this.width, this.height);
            
            this.petals.forEach(petal => {
                petal.y += petal.speed;
                petal.x += Math.sin(petal.y * 0.02) * petal.swing;
                petal.angle += Math.sin(petal.y * 0.01) * 2;

                if (petal.y > this.height + 20) {
                    petal.y = -20;
                    petal.x = Math.random() * this.width;
                }

                this.drawPetal(petal);
            });
        }

        animate() {
            this.update();
            requestAnimationFrame(() => this.animate());
        }
    }

    // 初始化特效
    window.addEventListener('load', () => {
        new Sakura(document.getElementById('sakuraCanvas'));
        
        // 调整按钮层级
        document.querySelector('.lotus-btn').style.zIndex = 1001;
    });
    </script>
</body>
</html>